<template>
  <div class="page">
    <div class="coupon-list-box">
      <ul>
        <li @click="toWriteOrder()">
          <div class="left-box">
            <span>小龙坎优惠券</span>
            <span>时间券：1小时免费</span>
            <span>有效期：2018-11-06至2019-02-05</span>
          </div>
          <div class="right-box">
            <p>
              <span>￥</span>
              <span>8</span>
            </p>
            <p>
              <span>(原价￥</span>
              <span class="mid-num">25</span>
              <span>)</span>
            </p>
            <p>
              <img src="../../assets/img/button_buy@2x.png" alt="">
            </p>
          </div>
        </li>
        <li>
          <div class="left-box">
            <span>小龙坎优惠券</span>
            <span>时间券：1小时免费</span>
            <span>有效期：2018-11-06至2019-02-05</span>
          </div>
          <div class="right-box">
            <p>
              <span>￥</span>
              <span>8</span>
            </p>
            <p>
              <span>(原价￥</span>
              <span class="mid-num">25</span>
              <span>)</span>
            </p>
            <p>
              <img src="../../assets/img/button_buy@2x.png" alt="">
            </p>
          </div>
        </li>
        <li>
          <div class="left-box">
            <span>小龙坎优惠券</span>
            <span>时间券：1小时免费</span>
            <span>有效期：2018-11-06至2019-02-05</span>
          </div>
          <div class="right-box">
            <p>
              <span>￥</span>
              <span>8</span>
            </p>
            <p>
              <span>(原价￥</span>
              <span class="mid-num">25</span>
              <span>)</span>
            </p>
            <p>
              <img src="../../assets/img/button_buy@2x.png" alt="">
            </p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        title:'购买优惠券'
      }
    },
    created(){
      this.$store.commit('setTitle',this.title)
      this.$store.commit('setShowCloseBtn',false)
    },
    methods: {
      toWriteOrder(){
        this.$router.push({path:'/writeOrder'})
      }
    }
  }
</script>

<style lang="less">
.coupon-list-box{
  padding: 30px 40px 0 40px;
  ul li{
    margin-bottom: 20px;
    background: #ffffff;
    box-shadow: 0 3px 14px 0 rgba(0,0,0,0.08);
    height: 190px;
    display: flex;
    .left-box{
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      span{
        height: 50px;
        line-height: 50px;
        padding-left: 24px;
        &:first-child{
          font-size: 32px;
          color: rgba(12,12,12,0.90);
        }
        &:nth-child(2){
          font-size: 24px;
          color: rgba(22,22,22,0.40);
        }
        &:last-child{
          font-size: 24px;
          color: rgba(22,22,22,0.40);
        }
      }
    }
    .right-box{
      display: flex;
      flex-direction: column;
      width: 210px;
      height: 190px;
      background: url('../../assets/img/coupon_right@2x.png') no-repeat 0px 0px;
      p{
        flex: 1;
        text-align: center;
        span{
          color: #FFFFFF;
          position: relative;
        }
        &:first-child{
          span{
            top: 30px;
            &:first-child{
              font-size: 30px;
            }
            &:last-child{
              font-size: 54px;
            }
          }
        }
        &:nth-child(2){
          span{
            font-size: 20px;
            letter-spacing: 0.83px;
            &.mid-num{
              text-decoration:line-through
            }
          }
        }
        &:last-child{
          img{
            position: relative;
            width: 144px;
            height: 50px;
            bottom: 15px;
          }
        }
      }
    }
  }
}
</style>
